<template>
    <div class="home-fullscreen">
        <!-- 添加隐藏的Map组件以获取其实例引用 -->
        <MapComponent ref="mapComponentRef" style="display: none;" />
        
        <!-- 现代化顶部轮播 -->
        <div class="fullwidth-banner">
            <el-carousel height="450px" :autoplay="true" :interval="5000" type="card" indicator-position="none">
                <el-carousel-item v-for="item in bannerList" :key="item.id" style="border-radius: 16px; overflow: hidden;">
                    <div class="immersive-banner-item" :class="{ 'request-banner-background': item.type === 'request' }" style="border-radius: 16px; overflow: hidden;">
                        <!-- 背景图片 -->
                        <el-image 
                            v-if="item.type !== 'request' && item.type !== 'user'"
                            :src="item.image" 
                            fit="cover" 
                            class="immersive-banner-image" 
                            style="border-radius: 16px;" />
                        
                        <!-- 用户类型的背景 -->
                        <div v-if="item.type === 'user' && item.user" 
                            class="immersive-banner-image user-banner-background" 
                            :style="{ backgroundImage: `url(${item.user.avatar && !item.user.avatar.startsWith('http') ? '/images/user/' + item.user.avatar : item.user.avatar || avatarImg})` }">
                        </div>
                        
                        <div class="immersive-overlay">
                            <div class="immersive-content">
                                <!-- 通用标题 -->
                                <h2 class="immersive-title">{{ item.title }}</h2>
                                <p class="immersive-subtitle">{{ item.subtitle }}</p>
                                
                                <!-- 商品类型的额外信息 -->
                                <div v-if="item.type === 'product' && item.product" class="banner-detail-info">
                                    <div class="product-card-mini">
                                        <el-image :src="item.product.imageUrls && item.product.imageUrls.length > 0 ? (item.product.imageUrls[0].startsWith('http') ? item.product.imageUrls[0] : '/images/product/' + item.product.imageUrls[0]) : placeholderImg" fit="cover" class="product-image-mini" />
                                        <div class="product-info-mini">
                                            <h3>{{ item.product.name }}</h3>
                                            <p class="price">¥{{ item.product.price }}</p>
                                            <p class="school">{{ item.product.locationDescription || item.product.sellerName }}</p>
                            </div>
                        </div>
                    </div>
                    
                                <!-- 学校类型的额外信息 -->
                                <div v-if="item.type === 'school' && item.school" class="banner-detail-info">
                                    <div class="school-card-mini">
                                        <el-avatar :size="120" :src="processSchoolLogo(item.school.logo)" fit="cover" class="school-logo-mini" />
                                        <div class="school-info-mini">
                                            <h3>{{ item.school.name }}</h3>
                                            <p>{{ item.school.productCount }}件商品</p>
                                            <el-progress :percentage="getSchoolPercentage(item.school)" :color="getSchoolColor(item.school)" style="width: 200px;" />
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 用户类型的额外信息 - MOVED OUTSIDE immersive-content -->
                                
                                <!-- 求购信息类型的额外信息 - MOVED OUTSIDE immersive-content -->
                                
                                <el-button type="primary" size="large" class="immersive-button" @click="navigateToBanner(item)">
                                    {{ item.type === 'product' ? '查看商品' : item.type === 'school' ? '浏览学校' : item.type === 'user' ? '查看用户' : item.type === 'request' ? '查看求购' : '了解更多' }}
                                </el-button>
                            </div>
                        </div>

                        <!-- 用户类型的额外信息 - MOVED HERE, as a direct child of immersive-banner-item -->
                                <div v-if="item.type === 'user' && item.user" class="banner-detail-info user-banner-detail">
                                    <div class="user-card-mini">
                                <el-avatar :size="80" :src="item.user.avatar && !item.user.avatar.startsWith('http') ? '/images/user/' + item.user.avatar : item.user.avatar || avatarImg" fit="cover" class="user-avatar-mini" />
                                        <div class="user-info-mini">
                                    <div class="user-details-mini">
                                        <div class="user-text-mini">
                                            <h4 class="user-name-mini">{{ item.user.name }}</h4>
                                            <p class="user-school">{{ item.user.school }}</p>
                                        </div>
                                    </div>
                                            <div class="credibility">
                                                <span>信誉度: {{ item.user.credibility || 0 }}%</span>
                                                <el-progress :percentage="item.user.credibility || 0" :color="customColorMethod" style="width: 200px;" />
                                            </div>
                                            <p class="product-count">已发布 {{ item.user.productCount || 0 }} 件商品</p>
                                        </div>
                                    </div>
                                </div>

                        <!-- 求购信息类型的额外信息 - MOVED HERE, as a direct child of immersive-banner-item -->
                                <div v-if="item.type === 'request' && item.request" class="banner-detail-info request-banner-detail">
                                    <div class="request-card-mini">
                                        <!-- 可以考虑为求购信息添加一个默认/占位图标，如果 item.image 不可靠 -->
                                        <!-- <el-image :src="item.image || placeholderRequestImg" fit="contain" class="request-icon-mini" /> -->
                                        <div class="request-info-mini">
                                            <h3 class="request-title-mini">{{ item.request.title }}</h3>
                                            <p class="request-budget-mini">预算: ¥{{ item.request.budget }}</p>
                                            <div v-if="item.request.user" class="request-user-mini">
                                        <el-avatar :size="24" :src="item.request.user.avatar && !item.request.user.avatar.startsWith('http') ? '/images/user/' + item.request.user.avatar : item.request.user.avatar || avatarImg" class="request-user-avatar-mini" />
                                                <span>{{ item.request.user.name }} ({{ item.request.user.school }})</span>
                                            </div>
                                        </div>
                            </div>
                        </div>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>

        <!-- 快捷导航区 -->
        <div class="floating-nav-container">
            <div class="floating-nav-wrapper">
                <div class="floating-entry-item" @click="goToMySchool">
                    <div class="entry-icon-wrapper">
                        <el-icon class="floating-entry-icon"><School /></el-icon>
                    </div>
                    <span>我的学校</span>
                </div>
                <div class="floating-entry-item" @click="goToMyProducts">
                    <div class="entry-icon-wrapper">
                        <el-icon class="floating-entry-icon"><Goods /></el-icon>
                    </div>
                    <span>我的商品</span>
                </div>
                <div class="floating-entry-item" @click="goToCategory">
                    <div class="entry-icon-wrapper">
                        <el-icon class="floating-entry-icon"><Menu /></el-icon>
                    </div>
                    <span>分类</span>
                </div>
                <div class="floating-entry-item" @click="goToSchool">
                    <div class="entry-icon-wrapper">
                        <el-icon class="floating-entry-icon"><School /></el-icon>
                    </div>
                    <span>学校</span>
                </div>
            </div>
        </div>

        <!-- 全宽地图区域 - 左右布局 -->
        <div class="fullwidth-section map-fullwidth-section">
            <div class="section-container-fluid">
                <div class="section-header fancy-header">
                    <h3><el-icon class="section-icon"><Location /></el-icon> 附近的商品</h3>
                    <el-button type="primary" text @click="viewMapFullScreen" class="fancy-view-more-btn">
                        全屏查看 <el-icon><ArrowRight /></el-icon>
                    </el-button>
                </div>
                <div class="map-content-container">
                    <!-- 左侧地图 -->
                    <div class="map-main-container">
                        <div id="map-container" class="map-content" ref="mapContainer">
                            <!-- 删除定位按钮 -->
                        </div>
                    </div>
                    
                    <!-- 右侧附近商品列表 -->
                    <div class="nearby-listing-container">
                        <div class="nearby-header">
                            <h4>附近商品推荐</h4>
                        </div>
                        <el-scrollbar class="nearby-scrollbar">
                            <div class="nearby-items-grid">
                                <div
                                    v-for="product in nearbyProducts"
                                    :key="product.id"
                                    class="nearby-product-item"
                                    @click="viewProductDetail(product)"
                                >
                                    <div class="nearby-product-image-container">
                                        <el-image :src="product.image && !product.image.startsWith('http') ? '/images/product/' + product.image : product.image" fit="cover" class="nearby-product-img" />
                                        <div class="distance-tag">
                                            <el-icon><Location /></el-icon> {{ product.distance }}km
                                        </div>
                                    </div>
                                    <div class="nearby-product-content">
                                        <h5 class="nearby-product-title">{{ product.name }}</h5>
                                        <p class="nearby-product-seller">
                                            <el-avatar :size="20" :src="product.seller.avatar && !product.seller.avatar.startsWith('http') ? '/images/user/' + product.seller.avatar : product.seller.avatar || avatarImg"></el-avatar>
                                            <span>{{ product.seller.name }}</span>
                                        </p>
                                        <p class="nearby-product-price">¥{{ product.price }}</p>
                                    </div>
                                </div>
                            </div>
                        </el-scrollbar>
                    </div>
                </div>
            </div>
        </div>

        <!-- 热门商品区 - iOS 19风格 -->
        <div class="fullwidth-section ios-section" ref="hotProductsSection">
            <div class="section-container-fluid">
                <div class="ios19-header" ref="hotProductsHeader">
                    <h3>热门商品</h3>
                    <button class="ios19-more-btn" @click="viewMoreProducts">
                        查看更多
                        <span class="ios19-arrow">→</span>
                    </button>
                </div>
                
                <!-- 热门商品容器 -->
                <div class="ios19-products-container">
                    <div class="ios19-products-scroll" @scroll="handleProductsScroll">
                        <div class="ios19-products-grid">
                            <!-- 商品卡片 -->
                            <div 
                                v-for="(product, index) in displayedProducts" 
                                :key="product.id + index"
                                class="ios19-product-card-square"
                                :class="{ 'appear-animation': true }"
                                :style="{ '--animation-delay': `${Math.min(index * 0.05, 1)}s` }"
                        @click="viewProductDetail(product)"
                                @mouseover="handleCardHover(product.id, true)"
                                @mouseleave="handleCardHover(product.id, false)"
                            >
                                <div class="ios19-card-inner-square">
                                    <!-- 商品图片容器 -->
                                    <div class="ios19-image-container-square">
                                        <el-image 
                                            :src="product.image && product.image.startsWith('http') ? product.image : (product.image ? '/images/product/' + product.image : placeholderImg)" 
                                            fit="cover" 
                                            class="ios19-product-image-square" 
                                            loading="lazy"
                                        />
                                        <div class="ios19-badge" v-if="product.badge">
                                            {{ product.badge }}
                            </div>
                            </div>
                                    
                                    <!-- 玻璃态内容区 -->
                                    <div class="ios19-content-square">
                                        <div class="ios19-content-left">
                                        <h4 class="ios19-title">{{ product.name }}</h4>
                                            <div class="ios19-info">
                                        <p class="ios19-school">{{ product.school }}</p>
                                            </div>
                                        </div>
                                        <div class="ios19-content-right">
                                            <p class="ios19-price">¥{{ product.price }}</p>
                                        <!-- 操作区 -->
                                            <div class="ios19-buttons">
                                                <button class="ios19-like-btn" @click.stop="handleLike(product)">
                                                    <i class="ios19-icon-heart"></i>
                                                </button>
                                                <button class="ios19-cart-btn" @click.stop="handleAddToCart(product)">
                                                    <i class="ios19-icon-cart"></i>
                                                </button>
                                            </div>
                        </div>
                            </div>
                        </div>
                    </div>
                </div>
                            
                <!-- 将iOS风格中的加载提示移到内容外部 -->
                        </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 加载提示放在底部红框区域 -->
            <div class="bottom-loading-container">
                <!-- 加载更多指示器 - iOS风格 -->
                <div v-if="isLoading" class="ios19-loading">
                    <div class="ios19-spinner"></div>
                    <span>加载中</span>
                </div>

                <!-- 全部加载完毕提示 - iOS风格 -->
                <div v-if="loadedAll && displayedProducts.length > 0" class="ios19-end-message">
                    <span>已经到底啦</span>
                </div>
            </div>

</template>

<script setup lang="ts">
// 定义组件名称，与路由配置中的name属性匹配
defineOptions({
  name: 'Home'
})

import { ref, onMounted, onUnmounted, computed, nextTick, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import { 
    Location, Star, ShoppingCart, ChatDotRound, Loading 
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'
import MapComponent from '@/views/map/Map.vue'
import request from '@/utils/request'

// 添加默认图片路径常量 - 使用 getImageUrl 获取，如果它们是动态的
// 如果 placeholderImg 和 avatarImg 总是固定的，则不需要通过 getImageUrl
const placeholderImg = '/images/placeholder.png'; // 固定占位图
const avatarImg = '/images/default_avatar.png'; // 固定默认头像, 假设放在 /images/default_avatar.png

// 处理学校logo URL的函数，用于从images目录加载学校logo
const processSchoolLogo = (logoFilename: string | undefined) => {
  if (!logoFilename) {
    // 确保这个默认图标在 src/assets/images/ 下存在
    return '/src/assets/images/default_school_icon.png'; // Fallback to a default filename
  }
  // 如果已经是包含 /src/assets/ 的路径，直接返回 (避免重复添加)
  if (logoFilename.includes('/src/assets/images/')) {
      return logoFilename;
  }
  // 假设 logoFilename 就是文件名，如 "北大.png"
  return `/src/assets/images/${logoFilename}`;
};

// 添加类型声明
declare global {
    interface Window {
        AMap: any; // 保持 any 类型，但后续使用时需要更小心
    onAMapLoaded: (callback: () => void) => void;
        _amapCallbacks?: Array<(error?: Error) => void>; // 改为可选
        _homeMarkers?: any[]; 
        initAMapCallback?: () => void; 
    }
    // 定义 GeolocationResult 类型以修复错误
    interface GeolocationResult {
        position: {
            lng: number;
            lat: number;
        };
        // 根据实际高德地图API返回结果补充其他字段
        [key: string]: any;
    }
}

const router = useRouter()
const mapContainer = ref<HTMLElement | null>(null)
const searchKeyword = ref('')
const productListVisible = ref(true)
const userStore = useUserStore()
const mapComponentRef = ref<InstanceType<typeof MapComponent> | null>(null)
// 添加地图实例引用
const mapInstance = ref<any>(null)

// 轮播图数据
const bannerList = ref<any[]>([])

// 计算学校百分比（用于进度条）- 保留函数以支持轮播图中的学校信息显示
const getSchoolPercentage = (school: any) => {
    // 简化计算，不再使用最大值比较
    return Math.min(school.productCount / 10)
}

// 获取学校颜色 - 保留函数以支持轮播图中的学校信息显示
const getSchoolColor = (school: any) => {
    const colors = ['#f56c6c', '#e6a23c', '#409eff', '#67c23a', '#909399']
    return colors[school.id % colors.length]
}

// 附近商品数据
const nearbyProducts = ref<any[]>([]) // 修改类型为 any[] 以正确处理后续赋值

// 修复地图API加载函数
const loadMapScript = () => {
  return new Promise<void>((resolve, reject) => {
    // 如果已经加载过了，直接返回
    if (window.AMap) {
      console.log('地图API已加载，直接返回');
      resolve();
      return;
    }

    // 如果已有正在加载的脚本，则添加回调
    if (document.querySelector('script[src*="webapi.amap.com/maps"]')) {
      console.log('地图API脚本正在加载中，等待完成');
      // 全局保存回调列表
      window._amapCallbacks = window._amapCallbacks || [];
    window._amapCallbacks.push((error) => {
      if (error) {
          reject(error);
      } else {
          resolve();
      }
      });
              return;
            }

    console.log('开始加载地图API脚本');
    // 创建script元素
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    // 确保包含所有需要的插件
    script.src = `https://webapi.amap.com/maps?v=2.0&key=b801e4ff3ab164d8ef56d85cd52ec0e0&plugin=AMap.Geolocation,AMap.Geocoder,AMap.ToolBar,AMap.Scale&callback=initAMapCallback`;

    // 全局回调函数
    // window.initAMapCallback = function() { // 此处不直接赋值，由高德API回调触发
    //   console.log('地图API加载完成(通过回调)');
    //   const callbacks = window._amapCallbacks || [];
    //   callbacks.forEach(cb => cb());
    //   window._amapCallbacks = [];
    //   delete window.initAMapCallback; 
    // };

    script.onerror = () => {
      const error = new Error('高德地图脚本加载失败');
      console.error(error);
      // 通知所有等待的回调
      const callbacks = window._amapCallbacks || [];
      callbacks.forEach(cb => cb(error));
      window._amapCallbacks = [];
      reject(error);
    };

    // 全局保存回调列表
    window._amapCallbacks = window._amapCallbacks || [];
    window._amapCallbacks.push((error) => {
      if (error) {
        reject(error);
          } else {
        resolve();
      }
    });

    document.head.appendChild(script);
  });
};

// 初始化地图
const initMap = async () => {
  try {
    pageLoading.value = true;
    // 先标记组件已开始加载
    await loadMapScript();
    console.log('地图脚本加载成功，开始初始化地图');
    
    // 需要确保mapContainer已经存在
    if (!mapContainer.value) {
      console.warn('地图容器元素不存在，等待DOM渲染');
      await nextTick();
      if (!mapContainer.value) {
        console.error('无法找到地图容器元素');
        pageLoading.value = false;
        return;
      }
    }
    
    const defaultCenter: [number, number] = [116.397428, 39.90923];
    
    try {
      // 检查AMap是否加载完成
      if (!window.AMap) {
        throw new Error('AMap 对象未加载');
      }
      
      // 创建地图实例
      const map = new AMap.Map(mapContainer.value, {
        zoom: 15,
        center: defaultCenter,
        viewMode: '2D',
        resizeEnable: true,
        jogEnable: false,
      });
      
      // 保存地图实例
      mapInstance.value = map;
      
      // 处理高德地图可能的加载问题
      map.on('complete', () => {
        console.log('地图加载完成');
        mapLoaded.value = true;
        pageLoading.value = false;
        
        // 地图加载完成后再初始化定位功能
        try {
          // 检查Geolocation插件是否可用
          if (AMap.Geolocation) {
      // 添加地理定位控件
      const geolocation = new AMap.Geolocation({
        enableHighAccuracy: true,
              timeout: 10000,
        buttonPosition: 'LB',
        buttonOffset: new AMap.Pixel(10, 20),
              zoomToAccuracy: false,
        showButton: true,
              showMarker: true
      });
      
      map.addControl(geolocation);
      
      // 异步获取位置
      geolocation.getCurrentPosition(function(status: string, result: GeolocationResult) { // 为回调参数添加类型
        if (status === 'complete' && result && result.position) {
          const position = result.position;
          
          // 验证坐标有效性
          if (!isNaN(position.lng) && !isNaN(position.lat)) {
            const currentPosition: [number, number] = [position.lng, position.lat]; // 明确类型
            
            // 平滑过渡到新位置
            map.setCenter(currentPosition);
            
            // 使用获取到的位置更新商品位置
            renderProductMarkers(currentPosition, map, null);
          }
        } else {
          console.warn('定位失败或返回数据不完整，使用默认位置');
          // 默认位置已经在之前渲染了，不需要再次渲染
        }
      });
          } else {
            console.warn('地图加载完成，但Geolocation插件不可用');
            // 不再尝试使用不可用的插件
          }
        } catch (geoError) {
          console.error('初始化地理定位失败:', geoError);
          // 继续使用默认位置
        }
      });
      
    } catch (mapError) {
      console.error('地图初始化失败:', mapError);
      pageLoading.value = false;
    }
  } catch (error) {
    console.error('初始化地图脚本失败:', error);
    pageLoading.value = false;
  }
};

// 更新附近商品并添加标记
const renderProductMarkers = async (position: [number, number], map: any, markerManager: any | null) => {
  // 如果已经发送过请求，则直接返回
  if (nearbyRequestSent.value) {
    console.log('附近商品请求已发送过，跳过重复请求');
    return;
  }
  
  nearbyRequestSent.value = true;
  
  // 确保位置有效
  if (!position || !Array.isArray(position) || position.length !== 2 || 
      isNaN(position[0]) || isNaN(position[1])) {
    console.warn('无效的位置参数，使用默认位置');
    position = [116.397428, 39.90923]; // 默认位置
  }
  
  // 确保地图对象有效
  if (!map) {
    console.error('地图对象无效');
    return;
  }
  
  try {
    // 清除已有标记的简单实现
    if (window._homeMarkers && Array.isArray(window._homeMarkers)) {
      window._homeMarkers.forEach((marker: any) => { // 为 marker 添加 any 类型
        if (marker && typeof map.remove === 'function') {
          try {
            map.remove(marker);
          } catch (e) {
            console.warn('移除标记失败:', e);
          }
        }
      });
    }
    
    // 重置标记数组
    if (window._homeMarkers) { // 检查 _homeMarkers 是否已定义
    window._homeMarkers = [];
    }
    
    // 构建API请求参数
    const params = {
      longitude: position[0],
      latitude: position[1],
      radius: 5000, // 搜索半径，单位：米
      limit: 10     // 首页展示数量可以少一些
    };
    
    console.log('首页地图正在请求附近商品数据:', params);
    
    let useBackendData = false;
    let backendProducts: any[] = []; // 初始化为 any[]
    
          try {
                // 使用request工具统一API调用方式，避免直接使用fetch
                const response = await request.get('/products/nearby', {
                  params: {
                    longitude: params.longitude,
                    latitude: params.latitude,
                    radius: params.radius,
                    limit: params.limit
                  }
                });
                
                // 解析响应数据
                const data = response; // request工具已经处理了JSON解析
                console.log('首页地图获取到后端响应数据:', data);
      
      // 后端可能没有返回标准格式，直接尝试解析数据
      let productsList: any[] = []; // 初始化为 any[]
      
      // 尝试不同的数据结构进行解析
      if (Array.isArray(data)) {
        // 数据直接是数组
        productsList = data;
      } else if (data.data && Array.isArray(data.data)) {
        // 标准格式 {success, data}
        productsList = data.data;
      } else if (data.list && Array.isArray(data.list)) {
        // 另一种可能的格式 {list}
        productsList = data.list;
      } else if (data.products && Array.isArray(data.products)) {
        // 另一种可能的格式 {products}
        productsList = data.products;
      } else if (data.items && Array.isArray(data.items)) {
        // 另一种可能的格式 {items}
        productsList = data.items;
      } else if (data.content && Array.isArray(data.content)) {
        // 另一种可能的格式 {content}
        productsList = data.content;
      } else {
        // 没有找到数组，尝试从对象中提取数据
        console.error('未找到商品数组数据，尝试解析对象:', data);
        try {
          productsList = Object.values(data).filter((item: any) => // 为 item 添加 any 类型
            typeof item === 'object' && item !== null && 'id' in item
          );
        } catch (e) {
          console.error('尝试从对象提取数组失败:', e);
        }
      }
      
      console.log('首页地图解析后的商品列表:', productsList);
      
      if (productsList && productsList.length > 0) {
        // 尝试适配可能的后端数据结构
        backendProducts = productsList.map((item: any) => { // 为 item 添加 any 类型
          try {
            // 尝试从多种可能的字段名中提取数据
            const id = item.id || item.productId || item.goodsId || 0;
            const name = item.name || item.title || item.productName || '未知商品';
            const price = item.price || item.productPrice || 0;
            // 优先使用 mainImageUrl，然后是其他可能的图片字段，最后是占位图
            const image = item.mainImageUrl || item.image || item.img || item.picture || item.thumbnail || item.coverImage || placeholderImg;
            const lng = item.longitude || item.lng || item.lon || (item.location ? item.location[0] : position[0]);
            const lat = item.latitude || item.lat || (item.location ? item.location[1] : position[1]);
            const dist = item.distance || item.dist || 0;
            const desc = item.description || item.desc || '';
            const sellerName = item.sellerName || (item.seller ? item.seller.name : '') || '未知用户';
            const sellerAvatar = item.sellerAvatar || (item.seller ? item.seller.avatar : '') || avatarImg;
            
            if (isNaN(lng) || isNaN(lat)) {
              throw new Error('无效的位置坐标');
            }
            
            return {
              id,
              name,
              price,
              image,
              distance: parseFloat((typeof dist === 'number' ? dist : 0).toFixed(1)),
              location: [lng, lat],
              description: desc,
              seller: {
                name: sellerName,
                avatar: sellerAvatar
              }
            };
          } catch (e) {
            console.warn('解析商品数据失败:', e);
            return null;
          }
        }).filter((product: any) => product !== null); // 为 product 添加 any 类型
        
        if (backendProducts.length > 0) {
          useBackendData = true;
          console.log('首页地图成功解析后端数据，商品数量:', backendProducts.length);
        }
      }
    } catch (error) {
      console.error('获取后端商品数据失败:', error);
    }
    
    // 优先使用后端数据
    if (useBackendData && backendProducts.length > 0) {
      console.log('首页地图使用后端数据渲染商品');
      
      // 更新商品列表
      nearbyProducts.value = backendProducts;
      
      // 为每个商品创建标记
      backendProducts.forEach((product: any) => { // 为 product 添加 any 类型
        addProductMarker(product, position, map);
      });
    } else {
      console.warn('首页地图未获取到有效后端数据，使用模拟数据');
      
      // 更新商品位置数据，使用现有的模拟数据
      nearbyProducts.value.forEach((product: any, index: number) => { // 为 product 和 index 添加类型
        // 计算随机距离
        const randomDistance = (Math.random() * 0.8 + 0.2).toFixed(1);
        product.distance = parseFloat(randomDistance);
        
        // 计算随机偏移的经纬度
        const offsetLng = (Math.random() * 0.01 - 0.005);
        const offsetLat = (Math.random() * 0.01 - 0.005);
        
        // 确保生成的坐标是有效数字
        const productLng = position[0] + offsetLng;
        const productLat = position[1] + offsetLat;
        
        if (isNaN(productLng) || isNaN(productLat)) {
          console.warn('生成无效坐标，跳过添加标记');
          return;
        }
        
        product.location = [productLng, productLat];
        
        // 添加标记
        addProductMarker(product, position, map);
      });
    }
  } catch (error) {
    console.error('更新商品数据失败:', error);
  }
};

// 添加单个商品标记
const addProductMarker = (product: any, position: [number, number], map: any) => {
  try {
        // 创建标记 - 使用自定义DOM元素作为标记内容
        const content = document.createElement('div');
        content.className = 'custom-marker-wrapper';
        
        // 设置内容 - 使用卡片式设计，添加指示箭头
        const markerHTML = `
          <div class="custom-marker" style="position:absolute;transform:translate(-50%, -100%);cursor:pointer;">
            <div class="marker-hitbox" style="position:absolute;top:-20px;left:-20px;right:-20px;bottom:-10px;"></div>
            <div class="marker-card" style="display:flex;align-items:center;background:white;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.15);padding:8px;min-width:160px;transition:transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);">
              <div class="marker-avatar" style="width:40px;height:40px;border-radius:4px;overflow:hidden;flex-shrink:0;margin-right:10px;">
                <img src="${product.image && !product.image.startsWith('http') ? '/images/product/' + product.image : (product.image || placeholderImg)}" alt="${product.name}" style="width:100%;height:100%;object-fit:cover;">
              </div>
              <div class="marker-info" style="flex:1;">
                <div class="marker-name" style="font-size:14px;color:#333;font-weight:500;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                  ${product.name}
                </div>
                <div class="marker-price" style="font-size:16px;font-weight:bold;color:#ff4d4f;">¥${product.price}</div>
              </div>
            </div>
            <div class="marker-arrow" style="position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid white;transition:border 0.3s ease;"></div>
          </div>
        `;
        
        content.innerHTML = markerHTML;
        
        // 获取标记元素的引用
        const markerElement = content.querySelector('.marker-card') as HTMLElement | null;
        const arrowElement = content.querySelector('.marker-arrow') as HTMLElement | null;
        const customMarker = content.querySelector('.custom-marker') as HTMLElement | null;
        const hitbox = content.querySelector('.marker-hitbox') as HTMLElement | null;
        
        // 创建标记并直接添加到地图
        const marker = new AMap.Marker({
          position: product.location,
          content: content,
          anchor: 'bottom-center',
          offset: new AMap.Pixel(0, 0),
          zIndex: 100,
          extData: product
        });
        
        // 标记悬停状态管理 - 使用闭包确保每个标记的状态是独立的
        let isHovered = false;
        // let animationInProgress = false; // animationInProgress 未使用，可以注释或删除
        // let hoverLocked = false; // hoverLocked 未使用，可以注释或删除
        let hoverLockTimer: NodeJS.Timeout | null = null; // 明确类型
        
        // 优化的mouseenter处理函数，减少延迟提高响应速度
        content.addEventListener('mouseenter', (e: MouseEvent) => { // 添加事件类型
          // 快速进入时立即清除之前的锁定和计时器
          if (hoverLockTimer) {
            clearTimeout(hoverLockTimer);
            hoverLockTimer = null;
          }
          
          // 避免重复触发动画
          if (isHovered) return;
          
          // 设置状态，减少锁定限制以提高快速移动时的响应
          isHovered = true;
          
          try {
            // 为快速响应直接应用样式，不等待动画完成
            if (markerElement) {
        markerElement.style.transition = 'all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1)';
            markerElement.style.transform = 'scale(1.1) translateY(-8px)';
            markerElement.style.boxShadow = '0 16px 32px rgba(0,0,0,0.3), 0 0 12px rgba(0,0,0,0.15)';
            markerElement.style.border = '1px solid rgba(255,255,255,0.8)';
            }
            if (arrowElement) {
        arrowElement.style.transition = 'all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1)';
            arrowElement.style.borderTopColor = '#f7f7f7';
            }
            
            // 置顶标记 - 异步执行但不延迟
            if (map) {
              try {
                map.remove(marker);
                map.add(marker);
              } catch (e) {
                console.error('标记置顶失败', e);
              }
            }
          } catch (e) {
            console.error('悬停效果应用失败:', e);
            isHovered = false;
          }
        });
        
        // 优化的mouseleave处理函数
        content.addEventListener('mouseleave', (e: MouseEvent) => { // 添加事件类型
          // 确保是真正的离开事件，不是移入子元素
          if (e.relatedTarget && content.contains(e.relatedTarget as Node)) { // 添加类型断言
            return;
          }
          
          // 如果当前没有悬停，直接返回
          if (!isHovered) return;
          
          // 立即设置状态以提高响应速度
          isHovered = false;
          
          try {
            // 立即恢复默认样式
            if (markerElement) {
        markerElement.style.transition = 'all 0.25s ease-out';
            markerElement.style.transform = '';
            markerElement.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)';
            markerElement.style.border = 'none';
            }
            if (arrowElement) {
        arrowElement.style.transition = 'all 0.25s ease-out';
            arrowElement.style.borderTopColor = 'white';
            }
          } catch (e) {
            console.error('恢复样式失败:', e);
          }
        });
        
        // 点击事件
        content.onclick = (e) => {
          viewProductDetail(product);
        };
        
        // 直接添加到地图
        map.add(marker);
        
        // 保存标记引用
        if (!window._homeMarkers) {
          window._homeMarkers = [];
        }
        window._homeMarkers.push(marker);
      } catch (error) {
        console.warn(`为商品 ${product.id} 添加标记失败:`, error);
      }
  }

// 处理搜索
const handleSearch = () => {
    if (!searchKeyword.value.trim()) {
        ElMessage.warning('请输入搜索关键词')
        return
    }
    
    router.push({
        path: '/search',
        query: { keyword: searchKeyword.value }
    })
}

// 查看商品详情
const viewProductDetail = (product: any) => {
    router.push(`/product/${product.id}`)
}

// 查看学校详情
// 删除viewSchoolDetail函数，因为热门学校组件已被删除

// 查看更多商品
const viewMoreProducts = () => {
    router.push('/category')
}

// 查看更多学校
// 删除viewMoreSchools函数，因为热门学校组件已被删除

// 查看全屏地图
const viewMapFullScreen = () => {
    router.push('/map')
}

// 前往我的学校
const goToMySchool = () => {
    if (userStore.isLoggedIn) {
        if (userStore.userInfo.school) {
            // 获取学校ID并跳转到学校详情页
            const schoolId = userStore.userInfo.school;
            router.push(`/school/${schoolId}`);
        } else {
            // 如果用户已登录但没有设置学校，跳转到个人资料页
            router.push('/user/profile');
            ElMessage.warning('请先在个人资料中设置您的学校信息');
        }
    } else {
        // 如果用户未登录，则跳转到登录页面
        router.push('/login');
        ElMessage.warning('请先登录账号');
    }
}

// 前往我的商品
const goToMyProducts = () => {
    router.push('/user/center')
}

// 前往分类页面
const goToCategory = () => {
    router.push('/category')
}

// 前往学校页面
const goToSchool = () => {
    router.push('/schools')
}

// 生命周期钩子
onMounted(() => {
  // 立即解锁页面显示，不阻塞UI
  pageLoading.value = false
  
  // 移除这部分代码，因为另一个onMounted中已经处理了这些初始化逻辑
  // 避免重复调用导致重复请求
})

// 组件卸载时清除定时器
onUnmounted(() => {
  if (bannerUpdateInterval) {
    clearInterval(bannerUpdateInterval);
  }
});

// 在script部分添加此函数
const customColorMethod = (percentage: number) => { // 为 percentage 添加 number 类型
  if (percentage < 30) {
    return '#909399';
  } else if (percentage < 70) {
    return '#e6a23c';
  } else {
    return '#67c23a';
  }
};

// 添加轮播图导航函数
const navigateToBanner = (item: any) => {
  if (item.type === 'product' && item.product) {
    router.push(`/product/${item.product.id}`);
  } else if (item.type === 'school' && item.school) {
    router.push(`/school/${item.school.id}`);
  } else if (item.type === 'user' && item.user) {
    router.push(`/user/${item.user.id}`); // 确保用户ID存在
  } else if (item.type === 'request' && item.request) {
    router.push(`/requests/${item.request.id}`);
  } else {
    // 可以添加一个默认的跳转或者不进行任何操作
    console.warn('未知或不完整的轮播项类型:', item.type, item);
  }
  };
  
// 更新轮播图内容，从后端获取数据
const updateBannerContent = async () => {
  // 如果已经发送过请求且非强制刷新，则直接返回
  if (bannerRequestSent.value) {
    console.log('Banner请求已发送过，跳过重复请求');
    return;
  }
  
  bannerRequestSent.value = true;
  
  try {
    const response = await request.get('/banners/list');
    console.log('Raw banner response from backend:', response);
    if (response.code === 200 && response.data) {
      bannerList.value = response.data.map((item: any) => {
        const newItem = { ...item }; // 创建副本以避免直接修改原始响应数据

        // 处理学校Logo (从本地assets)
        if (newItem.type === 'school' && newItem.school) {
          if (newItem.school.logo && !newItem.school.logo.includes('/')) {
            // 假设 newItem.school.logo 就是本地文件名，如 "北大.png"
            // processSchoolLogo 内部会拼接 /src/assets/images/
            // newItem.school.processedLogo = processSchoolLogo(newItem.school.logo); // 不需要，模板中直接调用
          } else if (newItem.school.logo) { // 如果已经是某种路径
            newItem.school.logo = newItem.school.logo; // 保持原样或根据情况处理
    } else {
            newItem.school.logo = 'default_school_icon.png'; // Fallback to a default filename
          }
        }

        // 处理商品图片 (从后端 /images/...)
        if (newItem.type === 'product' && newItem.product && newItem.product.imageUrls && newItem.product.imageUrls.length > 0) {
          const imageUrl = newItem.product.imageUrls[0];
          newItem.product.processedImageUrl = imageUrl && !imageUrl.startsWith('http') ? '/images/product/' + imageUrl : imageUrl;
        }

        // 处理用户头像 (从后端 /images/...)
        if (newItem.type === 'user' && newItem.user && newItem.user.avatar) {
          newItem.user.processedAvatarUrl = newItem.user.avatar && !newItem.user.avatar.startsWith('http') ? '/images/user/' + newItem.user.avatar : newItem.user.avatar;
        }
        
        // 处理轮播图本身的背景图 (假设也可能来自后端 /images/...)
        // 假设后端为轮播图背景图提供了 filename 和 imageType
        if (newItem.image && newItem.imageType) { 
          if (newItem.imageType === 'product' && !newItem.image.startsWith('http')) {
            newItem.processedImage = '/images/product/' + newItem.image;
          } else if (newItem.imageType === 'user' && !newItem.image.startsWith('http')) {
            newItem.processedImage = '/images/user/' + newItem.image;
          } else {
            newItem.processedImage = newItem.image; // 其他类型或已经是完整URL
          }
        } else if (newItem.image && !newItem.image.startsWith('http') && !newItem.image.startsWith('/') && newItem.type !== 'school') {
            // 如果 image 是一个简单的文件名，并且我们能假定一个类型 (e.g., 'banner')
            // 避免对已经是本地路径的学校logo错误处理
            newItem.processedImage = '/images/banner/' + newItem.image; 
        } else {
            newItem.processedImage = newItem.image; // 如果已经是完整URL或固定路径
        }

        return newItem;
      });
      console.log('轮播图内容已处理:', bannerList.value);
    } else {
      ElMessage.error('获取轮播图数据失败: ' + (response.message || '未知错误'));
      bannerList.value = []; 
    }
  } catch (error: any) {
    console.error('请求轮播图数据失败:', error);
    ElMessage.error('请求轮播图数据失败，请检查网络或联系管理员: ' + error.message);
    bannerList.value = [];
  }
};

// 设置定时更新轮播图内容
let bannerUpdateInterval: NodeJS.Timeout | null = null;

// 扩展热门商品数据，用于无限滚动
const allProducts = ref([
    { 
        id: 1, 
        name: 'iPhone 13', 
        price: 4999, 
        image: '/images/placeholder.png',
        school: '北京大学',
        badge: '热门'
    },
    { 
        id: 2, 
        name: 'MacBook Pro', 
        price: 9999, 
        image: '/images/placeholder.png',
        school: '清华大学',
        badge: '推荐'
    },
    { 
        id: 3, 
        name: '自行车', 
        price: 299, 
        image: '/images/placeholder.png',
        school: '北京大学',
        badge: '9成新'
    },
    { 
        id: 4, 
        name: '电脑桌', 
        price: 199, 
        image: '/images/placeholder.png',
        school: '中国人民大学',
        badge: '包邮'
    },
    { 
        id: 5, 
        name: 'iPad Pro', 
        price: 6299, 
        image: '/images/placeholder.png',
        school: '浙江大学',
        badge: '热门'
    },
    { 
        id: 6, 
        name: 'AirPods Pro', 
        price: 1499, 
        image: '/images/placeholder.png',
        school: '复旦大学',
        badge: '新上架'
    },
    { 
        id: 7, 
        name: '书架', 
        price: 129, 
        image: '/images/placeholder.png',
        school: '南京大学',
        badge: '8成新'
    },
    { 
        id: 8, 
        name: '显示器', 
        price: 1299, 
        image: '/images/placeholder.png',
        school: '武汉大学',
        badge: '包邮'
    }
])

// 无限滚动相关状态
const displayedProducts = ref<Array<{
    id: number;
    name: string;
    price: number;
    image: string;
    school: string;
    badge: string;
}>>([]) // 初始为空，由onMounted初始化
const page = ref(0)
const pageSize = ref(8)
const isLoading = ref(false)
const loadedAll = ref(false)
const productsContainer = ref(null)

// 生成更多商品数据（模拟API）（修改以产生不同宽高比的图片）
const generateMoreProducts = (startIndex: number, endIndex: number) => { // 为参数添加 number 类型
    // 如果已有的商品不够，动态生成更多
    if (startIndex >= allProducts.value.length) {
        // 生成额外的商品数据
        const newProducts = Array.from({ length: pageSize.value }, (_, i) => {
            const index = allProducts.value.length + i
            // 随机生成不同宽高比的图片，以实现瀑布流效果
            const randomHeight = Math.floor(Math.random() * 150) + 200; // 200-350之间的随机高度
            
            return {
                id: index + 1,
                name: `商品${index + 1}`,
                price: Math.floor(Math.random() * 1000) + 100,
                image: `https://picsum.photos/400/${randomHeight}?random=${index + 1}`, // 使用随机占位图
                school: ['北京大学', '清华大学', '浙江大学', '复旦大学', '武汉大学'][Math.floor(Math.random() * 5)],
                badge: ['热门', '推荐', '新品', '特惠', '包邮'][Math.floor(Math.random() * 5)]
            }
        })
        
        // 添加到总商品列表
        allProducts.value = [...allProducts.value, ...newProducts]
    }
    
    // 如果达到100个商品，就不再生成新商品
    if (allProducts.value.length >= 100 && startIndex >= allProducts.value.length) {
        return []
    }
    
    // 返回请求的分页数据
    return allProducts.value.slice(startIndex, endIndex)
}

// 处理商品列表滚动事件
const handleProductsScroll = (e: Event) => { // 为 e 添加 Event 类型
    const target = e.target as HTMLElement; // 添加类型断言
    const { scrollTop, scrollHeight, clientHeight } = target;
    
    // 当滚动到距离底部100px以内时，加载更多商品
    if (scrollHeight - scrollTop - clientHeight < 100 && !isLoading.value && !loadedAll.value) {
        loadMoreProducts()
    }
}

// 喜欢商品处理函数
const handleLike = (product: any) => { // product 类型可以更具体
    ElMessage.success(`已添加 ${product.name} 到收藏夹`);
}

// 添加到购物车处理函数
const handleAddToCart = (product: any) => { // product 类型可以更具体
    ElMessage.success(`已添加 ${product.name} 到购物车`);
}

// 卡片悬停处理
const handleCardHover = (productId: number | string, isHovering: boolean) => { // 为参数添加具体类型
    // 仅实现视觉效果，无需额外处理
    console.log(`Product ${productId} hover state: ${isHovering}`);
}

// 修改商品加载逻辑，每次加载一页商品
const loadMoreProducts = async () => {
    if (isLoading.value || loadedAll.value) return
    
    isLoading.value = true
    
    try {
        // 计算下一页的起始和结束索引（用于fallback）
        const startIndex = page.value * pageSize.value
        const endIndex = startIndex + pageSize.value
        
        // 尝试向后端发送请求获取热门商品数据
        try {
            const response = await request.get('/products/popular', {
                params: {
                    page: page.value,
                    pageSize: pageSize.value
                }
            })
            
            // 处理返回的数据 - 修正数据结构的访问路径
            console.log('API返回数据:', response)
            
            // 正确解析data.content数组作为商品列表
            let moreProducts = response.data?.content || []
            console.log('解析到的商品数据:', moreProducts)
            
            // 为每个商品添加固定的热门标签，并确保图片路径只包含文件名或完整URL
            moreProducts = moreProducts.map((product: any) => {
                let finalImageValue = '';
                const imageUrlToProcess = product.mainImageUrl || product.image || '';

                if (imageUrlToProcess.startsWith('http://') || imageUrlToProcess.startsWith('https://')) {
                    finalImageValue = imageUrlToProcess; // Use full URL
                } else if (imageUrlToProcess) {
                    // Not a full URL, extract filename
                    finalImageValue = imageUrlToProcess.substring(imageUrlToProcess.lastIndexOf('/') + 1);
                }

                return {
                    ...product,
                    badge: '热门',  // 前端固定添加热门标签
                    image: finalImageValue
                };
            });
            
            if (moreProducts.length > 0) {
                // 添加新商品到显示列表
                displayedProducts.value = [...displayedProducts.value, ...moreProducts]
                page.value++
            } else {
                // 没有更多商品了
                loadedAll.value = true
            }
        } catch (apiError) {
            console.error('API请求失败，使用模拟数据:', apiError)
            // API请求失败，使用模拟数据作为备选
            // 模拟API请求延迟
            await new Promise(resolve => setTimeout(resolve, 800))
            
            // 获取更多商品使用模拟数据生成
            const moreProducts = generateMoreProducts(startIndex, endIndex)
            
            if (moreProducts.length > 0) {
                // 添加新商品到显示列表
                displayedProducts.value = [...displayedProducts.value, ...moreProducts]
                page.value++
            } else {
                // 没有更多商品了
                loadedAll.value = true
            }
        }
    } catch (error) {
        console.error('加载更多商品失败:', error)
        ElMessage.error('加载更多商品失败，请稍后重试')
    } finally {
        isLoading.value = false
    }
}

// 初始化时加载第一页商品
onMounted(() => {
    // 使用nextTick确保DOM已完全渲染
    nextTick(() => {
        // 初始化第一页数据
        loadMoreProducts()
        
        // 为商品设置随机图片 (如果allProducts仍然是本地数据)
        // allProducts.value.forEach((product, index) => {
        //     product.image = `/images/placeholder.png`;
        // });
        
        // 初始化地图
        initMap();
        
        // 初始更新轮播图内容
        updateBannerContent();
        
        // 设置定时器，每小时更新一次轮播图内容
        bannerUpdateInterval = setInterval(() => {
            // 重置请求状态，允许定时更新
            bannerRequestSent.value = false;
            updateBannerContent();
        }, 3600000); // 修改为3600000毫秒 (1小时)
        
        // 设置滚动控制
        setupScrollControl();
    });
});

// 添加热门商品区域引用
const hotProductsSection = ref<HTMLElement | null>(null)
const isSectionFixed = ref(false)

// 修改滚动控制，实现整个热门商品区域固定在顶部
const setupScrollControl = () => {
  let lastScrollTop = 0;
  
  // 滚动事件处理
  const handleScroll = () => {
    if (!hotProductsSection.value) return;
    
    const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
    const sectionRect = hotProductsSection.value.getBoundingClientRect();
    
    // 当热门商品区域顶部接触视口顶部时，将其固定
    if (sectionRect.top <= 0 && !isSectionFixed.value) {
      // 记录现在的位置，以便恢复
      const currentTop = hotProductsSection.value.offsetTop;
      
      // 固定热门商品区域
      isSectionFixed.value = true;
      document.body.style.overflow = 'hidden';
      // 防止页面跳动
      document.body.style.position = 'fixed';
      document.body.style.width = '100%';
      document.body.style.top = `-${currentScrollTop}px`;
      
      // 视觉反馈
      hotProductsSection.value.style.boxShadow = '0 0 15px rgba(0,0,0,0.1)';
    }
    
    // 如果向上滚动超过热门商品区域的位置，取消固定
    if (isSectionFixed.value && currentScrollTop < lastScrollTop) {
      // 恢复正常滚动
      isSectionFixed.value = false;
      document.body.style.overflow = '';
      document.body.style.position = '';
      document.body.style.width = '';
      
      // 保持滚动位置
      const scrollY = document.body.style.top;
      document.body.style.top = '';
      window.scrollTo(0, parseInt(scrollY || '0') * -1);
      
      // 恢复视觉样式
      if (hotProductsSection.value) {
        hotProductsSection.value.style.boxShadow = '';
      }
    }
    
    lastScrollTop = currentScrollTop;
  };
  
  // 阻止向下滚动越过热门商品区
  const handleWheel = (e: WheelEvent) => {
    if (!hotProductsSection.value || !isSectionFixed.value) return;
    
    // 如果已经固定且用户尝试继续向下滚动
    if (e.deltaY > 0) {
      e.preventDefault();
    }
  };
  
  // 添加事件监听
  window.addEventListener('scroll', handleScroll);
  window.addEventListener('wheel', handleWheel, { passive: false });
  
  // 组件卸载时移除监听
  onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll);
    window.removeEventListener('wheel', handleWheel);
    // 确保恢复正常状态
    document.body.style.overflow = '';
    document.body.style.position = '';
    document.body.style.top = '';
    document.body.style.width = '';
  });
};

// 添加页面加载状态指示
const pageLoading = ref(true)
const mapLoaded = ref(false)
// 标记请求状态，防止重复请求
const bannerRequestSent = ref(false)
const nearbyRequestSent = ref(false)


</script>

<style scoped>
/* 全屏布局样式 */
.home-fullscreen {
    width: 100%;
    overflow-x: hidden;
}

/* 全宽轮播 */
.fullwidth-banner {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 80px;
    overflow: hidden;
}

.immersive-banner-item {
    position: relative;
    height: 100%;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.immersive-banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px !important;
    transition: transform 1s ease, filter 0.5s ease;
}

.immersive-banner-item:hover .immersive-banner-image {
    transform: scale(1.05);
    filter: brightness(0.85);
}

.immersive-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.2) 100%);
}

.immersive-content {
    padding: 80px;
    max-width: 650px;
    color: white;
    transform: translateX(0);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.immersive-banner-item:hover .immersive-content {
    transform: translateX(30px);
}

.immersive-title {
    margin: 0 0 25px;
    font-size: 52px;
    font-weight: 800;
    line-height: 1.2;
    text-shadow: 0 3px 15px rgba(0, 0, 0, 0.4);
    letter-spacing: -0.5px;
}

.immersive-subtitle {
    margin: 0 0 35px;
    font-size: 22px;
    opacity: 0.95;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    line-height: 1.5;
}

.immersive-button {
    padding: 14px 35px;
    font-size: 17px;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, #42b4ff, #4266ff);
    border: none;
}

.immersive-button:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.25);
    background: linear-gradient(135deg, #3aa3ee, #3355ee);
}

/* 浮动导航 */
.floating-nav-container {
    position: relative;
    margin: -70px auto 60px;
    z-index: 10;
}

.floating-nav-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.floating-entry-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 23%;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}

.floating-entry-item::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #4266ff, #42b4ff);
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.floating-entry-item:hover::before {
    width: 80%;
}

.entry-icon-wrapper {
    position: relative;
    margin-bottom: 12px;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: linear-gradient(135deg, #FF5722, #FF9800);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 10px 20px rgba(255, 87, 34, 0.3);
    overflow: hidden;
}

.floating-entry-item:nth-child(1) .entry-icon-wrapper {
    background: linear-gradient(135deg, #FF5722, #FF9800);
    box-shadow: 0 10px 20px rgba(255, 87, 34, 0.3);
}

.floating-entry-item:nth-child(2) .entry-icon-wrapper {
    background: linear-gradient(135deg, #4CAF50, #8BC34A);
    box-shadow: 0 10px 20px rgba(76, 175, 80, 0.3);
}

.floating-entry-item:nth-child(3) .entry-icon-wrapper {
    background: linear-gradient(135deg, #2196F3, #03A9F4);
    box-shadow: 0 10px 20px rgba(33, 150, 243, 0.3);
}

.floating-entry-item:nth-child(4) .entry-icon-wrapper {
    background: linear-gradient(135deg, #9C27B0, #E040FB);
    box-shadow: 0 10px 20px rgba(156, 39, 176, 0.3);
}

.entry-icon-wrapper::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
    top: -50%;
    left: -50%;
    transform: rotate(45deg);
    transition: all 0.6s ease;
}

.floating-entry-item:hover .entry-icon-wrapper::before {
    top: 100%;
    left: 100%;
}

.floating-entry-icon {
    background: transparent !important;
    color: white !important;
    box-shadow: none !important;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-size: 32px;
}

.floating-entry-item span {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    transition: all 0.3s ease;
    margin-top: 5px;
}

.floating-entry-item:hover {
    transform: translateY(-5px);
    background-color: #f8f9ff;
}

.floating-entry-item:hover .entry-icon-wrapper {
    transform: scale(1.1);
}

.floating-entry-item:nth-child(1):hover span {
    color: #FF5722;
}

.floating-entry-item:nth-child(2):hover span {
    color: #4CAF50;
}

.floating-entry-item:nth-child(3):hover span {
    color: #2196F3;
}

.floating-entry-item:nth-child(4):hover span {
    color: #9C27B0;
}

.floating-entry-item:hover .floating-entry-icon {
    transform: rotate(15deg) scale(1.2);
}

/* 全宽内容区 */
.fullwidth-section {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 70px 0;
}

.map-fullwidth-section {
    background: linear-gradient(165deg, #fafbfd 0%, #f0f5fb 100%);
    padding-bottom: 90px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.05) inset;
}

.gradient-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9f0f7 100%);
}

.light-section {
    background-color: white;
}

.section-container-fluid {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px;
}

.fancy-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
    position: relative;
}

.fancy-header h3 {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    color: #333;
    display: flex;
    align-items: center;
}

.fancy-header::after {
    content: '';
    position: absolute;
    bottom: -18px;
    left: 0;
    width: 90px;
    height: 5px;
    background: linear-gradient(90deg, #4266ff, #42b4ff);
    border-radius: 5px;
}

.section-icon {
    margin-right: 16px;
    color: #4266ff;
    font-size: 28px;
}

.fancy-view-more-btn {
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: #4266ff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fancy-view-more-btn:hover {
    transform: translateX(5px);
}

/* 左右分栏地图区域 */
.map-content-container {
    display: flex;
    gap: 30px;
    height: 600px;
}

.map-main-container {
    flex: 1;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    position: relative;
    border: 1px solid rgba(66, 102, 255, 0.1);
}

.map-content {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.nearby-listing-container {
    flex: 0 0 300px;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.nearby-header {
    padding: 30px;
    border-bottom: 1px solid #f0f0f0;
    background: linear-gradient(90deg, #fafbfd, #f7f9fc);
}

.nearby-header h4 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nearby-header h4::before {
    content: '';
    display: block;
    width: 4px;
    height: 20px;
    background: linear-gradient(to bottom, #4266ff, #42b4ff);
    border-radius: 2px;
}

.nearby-scrollbar {
    flex: 1;
    padding: 5px;
}

.nearby-items-grid {
    display: flex;
    flex-direction: column;
    gap: 12px; /* 减小项目间间距 */
    padding: 15px; /* 减小内边距 */
}

.nearby-product-item {
    display: flex;
    gap: 12px; /* 减小间距 */
    background: white;
    border-radius: 16px;
    padding: 12px; /* 减小内边距 */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.nearby-product-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    border-color: rgba(66, 102, 255, 0.1);
}

.nearby-product-image-container {
    position: relative;
    width: 90px; /* 减小宽度从130px到90px */
    height: 90px; /* 减小高度从130px到90px */
    border-radius: 10px; /* 适当减小圆角 */
    overflow: hidden;
    flex-shrink: 0;
}

.nearby-product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.nearby-product-item:hover .nearby-product-img {
    transform: scale(1.15);
}

.distance-tag {
    position: absolute;
    bottom: 5px; /* 调整位置 */
    left: 5px; /* 调整位置 */
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 6px; /* 减小内边距 */
    border-radius: 6px; /* 减小圆角 */
    font-size: 10px; /* 减小字体大小 */
    display: flex;
    align-items: center;
    gap: 3px; /* 减小间距 */
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.nearby-product-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.nearby-product-title {
    margin: 0 0 8px; /* 减小下边距 */
    font-size: 16px; /* 减小字体大小 */
    font-weight: 600;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nearby-product-seller {
    margin: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px; /* 减小间距 */
    font-size: 12px; /* 减小字体大小 */
    color: #666;
}

.nearby-product-price {
    margin: 10px 0 0; /* 减小上边距 */
    font-size: 20px; /* 减小字体大小 */
    font-weight: 700;
    background: linear-gradient(135deg, #ff6b6b, #ff8c8c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* 苹果风格标题 */
.ios-style-header {
    margin-bottom: 24px;
}

.ios-style-header h3 {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #1C1C1E;
}

.ios-view-more-btn {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #007AFF;
}

/* 苹果风格商品网格 */
.ios-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

.ios-product-card {
    background-color: #FFFFFF;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ios-product-card:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.product-image-container {
    position: relative;
    padding-top: 56.25%; /* 16:9比例 */
    overflow: hidden;
}

.product-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.ios-product-card:hover .product-image {
    transform: scale(1.05);
}

.favorite-button {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #8E8E93;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.25s ease;
}

.ios-product-card:hover .favorite-button {
    opacity: 1;
    transform: translateY(0);
}

.favorite-button:hover {
    background-color: rgba(255, 255, 255, 0.9);
    color: #FF2D55;
}

.product-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
}

.product-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product-title {
    margin: 0 0 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: #1C1C1E;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-price {
    margin: 0 0 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #FF3B30;
}

.product-school {
    margin: 0 0 12px;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    color: #8E8E93;
}

.product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.product-time {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
    font-size: 13px;
    color: #8E8E93;
}

.ios-cart-button {
    background-color: #007AFF;
    color: white;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 122, 255, 0.3);
    transition: all 0.3s ease;
}

.ios-cart-button:hover {
    background-color: #0062CC;
    transform: scale(1.05);
}

/* 媒体查询确保响应式布局 */
@media (max-width: 992px) {
    .ios-products-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

@media (max-width: 768px) {
    .ios-products-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
    
    .product-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .ios-cart-button {
        align-self: flex-end;
    }
}

/* 学校展示 */
.school-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 35px;
}

.school-gallery-item {
    position: relative;
    background: white;
    border-radius: 16px;
    padding: 40px 20px 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow: hidden;
    background-image: 
        radial-gradient(circle at 10% 90%, rgba(79, 139, 255, 0.05) 0%, transparent 30%),
        radial-gradient(circle at 90% 10%, rgba(123, 90, 255, 0.05) 0%, transparent 30%);
    background-size: 100% 100%;
    background-position: center;
}

.school-gallery-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background: linear-gradient(90deg, #4F8BFF, #7B5AFF);
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.school-gallery-item::after {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(79, 139, 255, 0.1), rgba(123, 90, 255, 0.1));
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 0;
}

.school-gallery-item:hover {
    transform: translateY(-15px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.school-gallery-item:hover::before {
    transform: translateY(0);
}

.school-gallery-item:hover::after {
    transform: scale(1.5);
    opacity: 0.8;
}

.school-gallery-image {
    margin-bottom: 25px;
    position: relative;
}

.school-logo {
    border: 6px solid white;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.school-gallery-item:hover .school-logo {
    transform: scale(1.18);
}

.school-gallery-content {
    width: 100%;
    text-align: center;
}

.school-gallery-name {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.school-gallery-count {
    margin: 0 0 20px;
    font-size: 15px;
    color: #666;
}

.el-progress {
    margin-top: 5px;
}

@media (max-width: 1200px) {
    .map-content-container {
        flex-direction: column;
        height: auto;
    }
    
    .map-main-container {
        height: 400px;
    }
    
    .nearby-listing-container {
        width: 100%;
        height: 400px;
    }
    
    .featured-products-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

@media (max-width: 768px) {
    .immersive-content {
        padding: 30px;
    }
    
    .immersive-title {
        font-size: 32px;
    }
    
    .floating-nav-wrapper {
        flex-wrap: wrap;
    }
    
    .floating-entry-item {
        width: 50%;
    }
    
    .featured-products-grid {
        grid-template-columns: 1fr;
    }
    
    .school-gallery {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* 自定义地图标记样式 */
.custom-marker-wrapper {
  position: relative;
  width: auto;
  height: auto;
}

.custom-marker {
  position: absolute;
  transform: translate(-50%, -100%);
  cursor: pointer;
}

.marker-hitbox {
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -10px;
}

/* 标记卡片样式 */
.marker-card {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  padding: 8px;
  min-width: 160px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 箭头样式 */
.marker-arrow {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid white;
  transition: border 0.3s ease;
}

.marker-avatar {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  margin-right: 10px;
}

.marker-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.marker-info {
  flex: 1;
}

.marker-name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marker-price {
  font-size: 16px;
  font-weight: bold;
  color: #ff4d4f;
}

/* 轮播图详情信息 */
.banner-detail-info {
    margin-top: 25px;
    margin-bottom: 25px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    padding: 20px;
    border-radius: 16px;
    width: max-content;
    max-width: 400px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 商品卡片样式 */
.product-card-mini {
    display: flex;
    align-items: center;
    gap: 20px;
}

.product-image-mini {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.product-info-mini {
    color: white;
}

.product-info-mini h3 {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 600;
}

.product-info-mini .price {
    margin: 0 0 5px;
    font-size: 24px;
    font-weight: 700;
    color: #ff6b6b;
}

.product-info-mini .school {
    margin: 0;
    font-size: 14px;
    opacity: 0.8;
}

/* 学校卡片样式 */
.school-card-mini {
    display: flex;
    align-items: center;
    gap: 20px;
}

.school-logo-mini {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.school-info-mini {
    color: white;
}

.school-info-mini h3 {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 600;
}

.school-info-mini p {
    margin: 0 0 10px;
    font-size: 16px;
}

/* 用户卡片样式 */
.user-card-mini {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 2;
}

.user-avatar-mini {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.user-info-mini {
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.user-info-mini h3 {
    margin: 0 0 5px;
    font-size: 22px;
    font-weight: 600;
}

.user-info-mini p {
    margin: 0 0 10px;
    font-size: 16px;
}

.credibility {
    margin-bottom: 10px;
}

.credibility span {
    display: block;
    margin-bottom: 5px;
}

.product-count {
    margin-top: 5px;
    font-size: 14px;
    opacity: 0.8;
}

/* 新增用户卡片背景样式 */
.user-banner-detail {
    position: relative;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.7); /* 使用半透明背景 */
    z-index: 2; /* 确保内容在背景上方 */
}

.user-banner-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(15px) brightness(0.5);
    z-index: 0; /* 降低z-index确保内容在上方 */
    opacity: 1; /* 改为完全不透明 */
    transform: scale(1.1);
    transition: all 0.5s ease;
}

.immersive-banner-item:hover .user-banner-background {
    filter: blur(10px) brightness(0.6);
    transform: scale(1.15);
}

/* 删除之前的悬停样式 */
.user-banner-detail:hover .user-banner-background {
    filter: none;
    transform: none;
}

.user-banner-detail {
    position: relative;
    overflow: hidden;
    background: rgb(0, 0, 0); /* 使用完全不透明背景 */
    z-index: 2; /* 确保内容在背景上方 */
}

/* 无限滚动商品列表样式 */
.infinite-products-container {
    position: relative;
    width: 100%;
}

.infinite-products-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
    padding: 8px 4px 32px 4px;
}

.loading-more {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    color: #666;
    font-size: 14px;
}

.loading-icon {
    animation: rotate 1s linear infinite;
    margin-right: 8px;
}

@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

.all-loaded {
    grid-column: 1 / -1;
    text-align: center;
    padding: 16px 0;
    color: #999;
    font-size: 14px;
}

/* 瀑布流布局样式 */
.waterfall-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.waterfall-wrapper {
    column-count: 4;
    column-gap: 20px;
    padding: 10px 5px;
}

.waterfall-item {
    break-inside: avoid;
    margin-bottom: 20px;
    cursor: pointer;
}

.waterfall-product-card {
    background-color: #FFFFFF;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.waterfall-product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.waterfall-image-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
}

.waterfall-image {
    width: 100%;
    display: block;
    border-radius: 16px 16px 0 0;
    transition: transform 0.5s ease;
}

.waterfall-product-card:hover .waterfall-image {
    transform: scale(1.05);
}

.waterfall-product-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* 响应式设计 */
@media (max-width: 1400px) {
    .waterfall-wrapper {
        column-count: 4;
    }
}

@media (max-width: 1200px) {
    .waterfall-wrapper {
        column-count: 3;
    }
}

@media (max-width: 992px) {
    .waterfall-wrapper {
        column-count: 2;
    }
}

@media (max-width: 767px) {
    .waterfall-wrapper {
        column-count: 2;
        column-gap: 15px;
    }
}

@media (max-width: 576px) {
    .waterfall-wrapper {
        column-count: 1;
    }
}

.loading-more {
    column-span: all;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    color: #666;
    font-size: 14px;
    margin-top: 10px;
}

.loading-icon {
    animation: rotate 1s linear infinite;
    margin-right: 8px;
}

@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

.all-loaded {
    column-span: all;
    text-align: center;
    padding: 16px 0;
    color: #999;
    font-size: 14px;
    margin-top: 10px;
}

/* iOS 19风格的新样式 - 热门商品区 */
.ios-section {
    background: linear-gradient(to bottom, #f5f5f7 0%, #fff 100%);
    padding: 60px 0 60px;
    overflow: hidden; /* 确保视差效果不影响布局 */
}

.ios19-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
    padding: 0 15px;
}

.ios19-header h3 {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', sans-serif;
    font-size: 45px;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0;
    letter-spacing: -0.5px;
}

.ios19-more-btn {
    background: none;
    border: none;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
    font-size: 25px;
    font-weight: 600;
    color: #0066cc;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.ios19-more-btn:hover {
    background-color: rgba(0, 102, 204, 0.1);
}

.ios19-arrow {
    transition: transform 0.3s ease;
}

.ios19-more-btn:hover .ios19-arrow {
    transform: translateX(3px);
}

/* 产品容器 */
.ios19-products-container {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
    padding: 20px 0;
}

.ios19-products-scroll {
    overflow-y: visible;
    overflow-x: hidden;
    height: auto;
    max-height: none;
    padding: 0 98px 0 0px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    scroll-behavior: smooth;
}

.ios19-products-scroll::-webkit-scrollbar {
    width: 0;
    display: none;
}

.ios19-products-wrapper {
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding-bottom: 50px; /* 底部留白 */
}

/* 产品卡片 - iOS 19风格 */
.ios19-product-card {
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
    cursor: pointer;
    transform: translateY(30px);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s ease;
    will-change: transform, opacity;
    border-radius: 20px; /* Squircle风格的圆角 */
    perspective: 1000px;
}

/* 出现动画 */
.appear-animation {
    animation: cardAppear 0.8s forwards;
    animation-delay: var(--animation-delay, 0s);
}

@keyframes cardAppear {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.ios19-card-inner-square {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: visible;
    position: relative;
    background-color: transparent;
    z-index: 1;
    padding: 14px; /* 添加统一内边距 */
}

.ios19-image-container-square {
    flex: 1;
    width: calc(100% - 28px); /* 在水平方向上与边框保持14px的距离 */
    position: relative;
    overflow: hidden;
    padding-bottom: 80%; /* 增加图片区域高度占比 */
    border-radius: 12px;
    margin: 14px auto 10px auto; /* 减少底部边距，让内容区域上移 */
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
    background-color: #e0e0e0;
    transform: translateY(0);
    transition: all 0.3s ease;
}

.ios19-product-image-square {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    border-radius: 12px; /* 增加图片圆角 */
    /* 删除边框 */
}

.ios19-product-card-square:hover .ios19-product-image-square {
    transform: scale(1.05);
}

.ios19-content-square {
    padding: 12px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: space-between;
    border-top: 1px solid rgba(230, 230, 235, 0.5);
}

.ios19-content-left {
    width: 70%;
}

.ios19-content-right {
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.ios19-product-card-square .ios19-buttons {
    display: flex;
    gap: 5px;
    margin-top: 5px;
}

/* 调整文字颜色以适应白色背景 */
.ios19-title {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    color: #111;
    line-height: 1.3;
}

.ios19-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2px;
}

.ios19-school {
    font-size: 12px;
    color: #666;
    margin: 2px 0 0 0;
    white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ios19-price {
    font-size: 15px;
    font-weight: 700;
    color: #ff4d4f;
    margin: 0;
    line-height: 1;
}

.ios19-buttons {
    display: flex;
    gap: 5px;
    margin-top: 5px;
}

.ios19-like-btn, .ios19-cart-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background-color: rgba(240, 240, 245, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    font-size: 12px;
}

.ios19-like-btn:hover, .ios19-cart-btn:hover {
    background-color: rgba(220, 220, 225, 0.9);
    transform: scale(1.1);
}

.ios19-icon-heart, .ios19-icon-cart {
    font-style: normal;
    line-height: 1;
}

.product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.product-time {
    font-size: 10px;
    color: #aaa;
}

.ios-cart-button {
    width: 24px !important;
    height: 24px !important;
    font-size: 11px;
    padding: 0;
}

/* iOS 19风格商品卡片样式，等比例缩小 */
.ios19-product-card {
    position: relative;
    width: 100%;
    background: white;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translateY(0);
    margin-bottom: 20px;
    opacity: 0;
    animation: fadeIn 0.6s ease forwards;
    animation-delay: var(--animation-delay, 0s);
    max-width: 100%;
    height: auto;
    transform-origin: center;
    scale: 0.95; /* 等比例缩小比例 */
}

.ios19-card-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ios19-products-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 强制每行4个商品 */
    gap: 16px;
    padding: 16px;
    width: 100%;
}

/* 响应式调整 */
@media (max-width: 1200px) {
    .ios19-products-wrapper {
        gap: 12px;
    }
}

@media (max-width: 992px) {
    .ios19-products-wrapper {
        gap: 10px;
    }
}

@media (max-width: 768px) {
    .ios19-products-wrapper {
        grid-template-columns: repeat(2, 1fr); /* 小屏幕显示2列 */
        gap: 10px;
    }
}

/* 调整卡片内容区域，减小内边距 */
.ios19-content {
    padding: 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    transition: background 0.3s ease;
}

/* 响应式设计 */
@media (max-width: 1400px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }
}

@media (max-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
}

@media (max-width: 992px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    }
}

@media (max-width: 767px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
        gap: 8px;
    }
    
    .waterfall-product-content {
        padding: 6px;
    }
    
    .product-title {
        font-size: 12px;
    }
}

@media (max-width: 576px) {
    .products-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }
    
    .waterfall-image-container {
        height: 90px;
    }
    
    .waterfall-product-card {
        min-height: 170px;
    }
}

/* 媒体查询确保响应式布局 */
@media (max-width: 992px) {
    .ios-products-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

@media (max-width: 768px) {
    .ios-products-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
    
    .product-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .ios-cart-button {
        align-self: flex-end;
    }
}

/* 热门商品网格布局样式 */
.ios19-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 默认四列 */
    gap: 16px;
    padding: 10px 10px;
}

/* 正方形商品卡片样式 */
.ios19-product-card-square {
    border-radius: 18px;
    overflow: visible; /* 允许内容溢出，以便显示阴影 */
    background-color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s, background 0.3s;
    cursor: pointer;
    aspect-ratio: 1/1;
    position: relative;
    padding: 0; /* 移除内边距，通过子元素控制 */
}

.ios19-product-card-square:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.95);
    z-index: 1;
}

/* 在样式表末尾添加图标样式定义 */
.ios19-icon-heart::before {
    content: '♥';
    color: #FF3B30;
}

.ios19-icon-cart::before {
    content: '🛒';
    font-size: 12px;
}

/* 热门商品样式 */
.popular-products-section {
    margin: 20px 0;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.products-container {
    position: relative;
    max-height: 600px;
    overflow-y: auto;
    padding: 10px 0;
    /* 调整滚动条样式 */
    scrollbar-width: thin;
    scrollbar-color: #e0e0e0 #f7f7f7;
}

.products-container::-webkit-scrollbar {
    width: 6px;
}

.products-container::-webkit-scrollbar-track {
    background: #f7f7f7;
    border-radius: 3px;
}

.products-container::-webkit-scrollbar-thumb {
    background-color: #e0e0e0;
    border-radius: 3px;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    grid-gap: 20px;
    padding: 10px 0;
}

/* 加载提示容器样式 */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 0;
    margin-top: 10px;
    width: 100%;
    border-top: 1px solid #f0f0f0;
}

.loading-more, .no-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px;
    color: #909399;
    font-size: 14px;
}

.loading-icon {
    margin-right: 8px;
    animation: rotate 1s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* iOS19 风格样式 */
.ios19-container {
    padding: 20px;
    background-color: #f8f8f8; /* 浅灰色背景 */
}

/* 添加loading-container样式 */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 0;
    margin-top: 10px;
    width: 100%;
    border-top: 1px solid #f0f0f0;
}

.ios19-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    grid-gap: 20px;
    margin-top: 20px;
}

.ios19-product-card {
    position: relative;
    background-color: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    cursor: pointer;
}

/* 底部红框区域加载提示样式 */
.bottom-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    margin: 10px 0;
    padding: 10px 0;
    border: none;
    background-color: transparent;
    box-shadow: none;
    position: relative;
    z-index: 10;
}

.ios19-loading, .ios19-end-message {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px;
    color: #909399;
    font-size: 16px; /* 增大字体，确保可见 */
}

.ios19-spinner {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    border: 2px solid #dcdfe6;
    border-top-color: #409eff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.request-banner-detail {
    /* 如果需要，可以为求购信息的 banner-detail-info 设置特定样式 */
    /* 例如，调整最大宽度或内边距 */
    padding: 15px; /* 统一内边距 */
}

.request-card-mini {
    display: flex;
    align-items: center; /* 垂直居中对齐内容 */
    gap: 15px; /* 图标（如果使用）和文字信息的间距 */
    width: 100%;
}

/* 如果使用图标，可以定义图标样式 */
/*
.request-icon-mini {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    flex-shrink: 0; 
}
*/

.request-info-mini {
    display: flex;
    flex-direction: column; /* 垂直排列标题、预算、用户信息 */
    gap: 8px; /* 各项信息之间的间距 */
    color: #fff; /* 确保文字在深色背景上可读 */
    flex-grow: 1; /* 占据剩余空间 */
    overflow: hidden; /* 防止内容溢出 */
}

.request-title-mini {
    font-size: 1.2rem; /* 调整标题字号 */
    font-weight: bold;
    margin: 0;
    line-height: 1.3;
    white-space: normal; /* 允许标题换行 */
    word-break: break-word; /* 单词过长时换行 */
}

.request-budget-mini {
    font-size: 1rem; /* 调整预算字号 */
    color: #ffd04b; /* 通常用于价格/预算的颜色 */
    font-weight: bold;
    margin: 0;
}

.request-user-mini {
    display: flex;
    align-items: center;
    gap: 8px; /* 头像和用户名的间距 */
    font-size: 0.85rem; /* 调整用户名字号 */
    opacity: 0.9;
    margin-top: 5px; /* 与上方内容隔开一些距离 */
}

.request-user-avatar-mini {
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.5); /* 给头像添加一个细边框 */
}

/* 新增样式：求购信息轮播项的背景 */
.immersive-banner-item.request-banner-background {
  background: linear-gradient(to right, black, white);
}

.school-icon {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: #333;
  transition: color 0.3s ease;
}

.school-icon:hover {
  color: #007bff;
}

.school-icon img {
  width: 24px;
  height: 24px;
}

.school-icon span {
  font-size: 14px;
  font-weight: 600;
}

.school-icon:hover span {
  text-decoration: underline;
}

.user-banner-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(15px) brightness(0.5);
    z-index: 0; /* 降低z-index确保内容在上方 */
    opacity: 1; /* 改为完全不透明 */
    transform: scale(1.1);
    transition: all 0.5s ease;
}

.immersive-banner-item:hover .user-banner-background {
    filter: blur(10px) brightness(0.6);
    transform: scale(1.15);
}

/* 删除之前的悬停样式 */
.user-banner-detail:hover .user-banner-background {
    filter: none;
    transform: none;
}

.user-banner-detail {
    position: relative;
    overflow: hidden;
    background: rgb(0, 0, 0); /* 使用完全不透明背景 */
    z-index: 2; /* 确保内容在背景上方 */
}

/* Style for .user-banner-detail when it's positioned on the right */
.banner-detail-info.user-banner-detail {
    position: absolute;
    top: 50%;
    right: 30px; /* Distance from the right edge */
    transform: translateY(-50%);
    width: 400px; /* Increased width */
    max-width: none; /* Override general max-width */
    padding: 30px; /* Increased padding */
    background-color: rgb(0, 0, 0); /* Solid black background */
    border-radius: 12px; /* Slightly different rounding */
    box-shadow: 0 8px 25px rgba(0,0,0,0.4); /* Adjusted shadow */
    color: white;
    z-index: 3; /* Ensure it's on top of other elements in the banner item */
    margin: 0; /* Reset margin */
    backdrop-filter: none; /* Remove blur inherited from .banner-detail-info */
    border: none; /* Remove border inherited from .banner-detail-info */
    /* overflow: hidden; /* Already in original .user-banner-detail, keep if needed */
}


.user-info-mini h3 {
    margin: 0 0 5px;
    font-size: 22px;
    font-weight: 600;
}

/* 删除之前的悬停样式 */
.user-banner-detail:hover .user-banner-background {
    filter: none;
    transform: none;
}

/* Style for .request-banner-detail when it's positioned on the right */
.banner-detail-info.request-banner-detail {
    position: absolute;
    top: 50%;
    right: 30px; /* Distance from the right edge */
    transform: translateY(-50%);
    width: 400px; /* Increased width */
    max-width: none; /* Override general max-width */
    padding: 30px; /* Increased padding */
    background-color: rgb(0, 0, 0); /* Solid black background */
    border-radius: 12px; /* Slightly different rounding */
    box-shadow: 0 8px 25px rgba(0,0,0,0.4); /* Adjusted shadow */
    color: white;
    z-index: 3; /* Ensure it's on top of other elements in the banner item */
    margin: 0; /* Reset margin */
    backdrop-filter: none; /* Remove blur inherited from .banner-detail-info */
    border: none; /* Remove border inherited from .banner-detail-info */
}


.user-info-mini h3 {
    margin: 0 0 5px;
    font-size: 22px;
    font-weight: 600;
}

/* 删除之前的悬停样式 */
.user-banner-detail:hover .user-banner-background {
    filter: none;
    transform: none;
}
</style>